<template>
    <div>
        <div class="model">
            <div class="model-title">
                <h2>园区生产企业排名</h2>
            </div>
            <div class="model-echart">
                <div id="companyCountTop10"></div>
            </div>
        </div>
    </div>
</template>
<script>
    import { getEnterpriseRanking } from '@/api/park.js'
    export default {
        data() {
            return {
                form: {
                    year: ''
                },
                echartData: {
                    x: [],
                    y: []
                },
                companyCountTop10Chart: "",
            }
        },
        methods: {
            async getEntProvinceCount(form) {
                if (form.year === '') return
                const res = await getEnterpriseRanking({
                    year: form.year
                })
                let x = [], y = [];
                res.map((e, index) => {
                    x.push(e.counts)
                    y.push(e.type)
                })
                this.echartData.x = x
                this.echartData.y = y
                if (this.companyCountTop10Chart !== '') {
                    let obj = {
                        xAxisData: this.echartData.y,
                        seriesData: this.echartData.x
                    }
                    this.companyCountTop10Chart.clear();
                    this.companyCountTop10Chart.setOption(this.$lib.barChart(obj));
                    this.companyCountTop10Chart.resize();
                } else {
                    this.initEChart()
                }
            },
            initEChart() {
                let obj = {
                    xAxisData: this.echartData.y,
                    seriesData: this.echartData.x
                }
                this.companyCountTop10Chart = this.$echarts.init(document.getElementById('companyCountTop10'));
                this.companyCountTop10Chart.setOption(this.$lib.barChart(obj, 2, ''));
                window.onresize = () => {
                    this.companyCountTop10Chart.resize();
                }
            },
            windowClose() {
                this.windowStatus = false
            }
        },
        watch: {
            '$store.state.app.year': {
                handler: function (nVal, oVal) {
                    this.form.year = nVal
                    this.getEntProvinceCount(this.form);
                },
                immediate: true
            }

        }
    }
</script>
<style scoped lang="scss">
    .model {
        margin-top: 1vh;
        padding: .4vw;
        background: url('../../assets/x1/modal_2_header.png') no-repeat top left, url('../../assets/x1/modal_2_footer.png') no-repeat bottom left;
        background-size: 100% auto;
    }

    #companyCountTop10 {
        width: 100%;
        height: 11vw;
    }

    .model-title {
        padding: screenVw(1) 0 0;

        h2 {
            text-align: center;
            color: #78dffd;
            font-size: screenVw(1.2);
        }
    }

    .model-echart {
        display: flex;
        padding: screenVw(0.5) 0;

        div {
            flex: 1;
        }
    }
</style>
